<%@ page language="java" import="com.bean.*,com.dao.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>头像修改</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="telephone=no" name="format-detection">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<link rel="stylesheet" href="./css/phone.css" type="text/css"/>
<script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script> 
<script type="text/javascript" src="./js/ht.js"></script> 
<script type="text/javascript" src="./js/cutpic.js" ></script> 
</head>

<body>
  
 <form method="post" action="UpdatePicture.pic?lujing=touxiang.jsp&id=${requestScope.bean.id }" id="form1" enctype="multipart/form-data">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="">
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="">
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<div class="aspNetHidden">

	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="75FEC5AA">
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="">
</div>
        <div class="wrapper">
            <div class="header_wrapper">
                <div class="ht_img">
                    <a href="./default.jsp"><img width="40" src=".${requestScope.bean.picturePath}"></a>
                </div>
                <div class="btn-group btn-group-option pull-right">
                    <span style="color:#fff;"><%=session.getAttribute("username") %>，欢迎您</span>
                    <button type="button" class="btnn btn-default dropdown-toggle" data-toggle="dropdown">
                        <img src="./img/9.png">
                     </button>
                    <ul class="dropdown-menu pull-right" role="menu" style="display: none;">
                            <li><a href="./info.jsp"><img src="${requestScope.bean.picturePath}">个人信息</a></li>
                            <li><a href="./touxiang.jsp"><img src="./img/q2.png">背景修改</a></li>
                            <li class="divider"></li>
                            <li><a id="lk" href="javascript:__doPostBack('ctl00$lk','')"><img src="./img/q3.png">退出</a></li>
                        </ul>
                </div>
                <div class="clr"></div>
             </div>
            <div class="page_wrapper">
                
     <div class="pageheader">
         <div class="pageicon pull-left">
             <a href="./default.jsp"><img src="./img/h-sy.png"></a>
         </div>
        <div class="media-body">
            <ul class="breadcrumb">
                <li><a href="./default.jsp"><img src="./img/sy.png"></a></li>                
                <li>背景修改</li>
            </ul>
        </div>
        <h4>背景修改</h4>
    </div>
    <div class="content">
        <p style="margin-bottom:15px;">图片格式必须为：bmp, jpeg, jpg, gif, png;不可大于2M</p>
        <div class="upload_area">           
            
                <input name="ctl00$ContentPlaceHolder1$head_file" type="file" id="ContentPlaceHolder1_head_file" accept="image/*" class="head_file">                
                <input type="submit" name="ctl00$ContentPlaceHolder1$btn" value="上传" id="ContentPlaceHolder1_btn" class="">
           
        </div>
       

        <div class="next_step dn">          
                <div class="show-left">                   
                   <div id="show-div">
                       <div class="imgCut1" style="width: 286px; height: 308px;">
                            <div class="imgCut11" style="width: 284px; height: 286px;">
                                <img id="ContentPlaceHolder1_ImageDrag" style="width:290px;height:auto;" class="imgCut111 imgCut">
                                <table class="imgCut112" border="0" cellpadding="0" cellspacing="0" style="cursor: pointer;">
                                    <tbody><tr><td style="width: 32px; height: 33px;"></td><td style="width: 32px; height: 33px;"></td><td style="width: 32px; height: 33px;"></td></tr>
                                    <tr><td style="width: 32px; height: 33px;"></td><td class="main" style="width: 220px; height: 220px;"></td><td style="width: 32px; height: 33px;"></td></tr>
                                    <tr><td style="width: 32px; height: 33px;"> </td><td style="width: 32px; height: 33px;"></td><td style="width: 32px; height: 33px;"></td></tr>
                                </tbody></table>
                            </div>                     
                         </div>
                    </div>
                            
                    <div class="zoom">
                        <p class="zoom-out">缩小</p>
                        <p class="zoom-in">放大</p>
                        <p class="clr"></p>
                    </div>
                </div>
                  <div class="show-right">                   
                    
                        <div class="circle_show">
                            <p class="imgCutNew111" id="ImgLogin2">
                                <img id="ContentPlaceHolder1_ImgYlYuan" class="imgCut" style="width:290px;height:auto;">
                            </p>
                        </div>
                       
                </div>          
                <div class="clr"></div>   
            <!--  <input type="submit" name="ctl00$ContentPlaceHolder1$btn1" value="提交保存" onclick="imgToSize(0);" id="ContentPlaceHolder1_btn1" class="btn">
            -->
            <div class="dn">           
                <input name="ctl00$ContentPlaceHolder1$txt_width" type="text" value="1" id="ContentPlaceHolder1_txt_width" class="txt_width">
                <input name="ctl00$ContentPlaceHolder1$txt_height" type="text" value="1" id="ContentPlaceHolder1_txt_height" class="txt_height">
                <input name="ctl00$ContentPlaceHolder1$txt_top" type="text" value="32" id="ContentPlaceHolder1_txt_top" class="txt_top">
                <input name="ctl00$ContentPlaceHolder1$txt_left" type="text" value="33" id="ContentPlaceHolder1_txt_left" class="txt_left">
                <input name="ctl00$ContentPlaceHolder1$txt_DropWidth" type="text" value="220" readonly id="ContentPlaceHolder1_txt_DropWidth" class="txt_DropWidth">
                <input name="ctl00$ContentPlaceHolder1$txt_DropHeight" type="text" value="220" readonly id="ContentPlaceHolder1_txt_DropHeight" class="txt_DropHeight">
                <input name="ctl00$ContentPlaceHolder1$txt_Zoom" type="text" value="0" id="ContentPlaceHolder1_txt_Zoom" class="txt_Zoom">
                <input name="ctl00$ContentPlaceHolder1$txt_ZoomWidth" type="text" value="1" id="ContentPlaceHolder1_txt_ZoomWidth" class="txt_ZoomWidth">
                <input name="ctl00$ContentPlaceHolder1$txt_ZoomHeight" type="text" value="1" id="ContentPlaceHolder1_txt_ZoomHeight" class="txt_ZoomHeight">
        </div>
        </div>
        <div id="ContentPlaceHolder1_final_div" class="now_img">
            <div class="card_img">
                <img width="222" src=".${requestScope.bean.picturePath}">
            </div>
        </div>
    </div>
     <script type="text/javascript">
         $(document).ready(function () {
             $(".head_file").change(function () {
                 $(".upload_btn").click();
             });
             $(".zoom-out").click(function () {
                 imgToSize(-20);
             });
             $(".zoom-in").click(function () {
                 imgToSize(20);
             });
             var imgCut1 = new ImgCut("show-div", "", 220, 220, 32, 33);
         });
         function Step2() {
             $("#ImgLogin1").css({ left: "-70px", top: "-40px" });
             $("#ImgLogin2").css({ left: "-40px", top: "-40px" });
             $(".next_step").show();
         }
         function final_step() {
             $(".next_step").hide();
         }
         window.onload = function () {
             var imagedrag = $(".ImageDrag");
             var image = new Image();
             image.src = imagedrag.attr("src");
             var realWidth = image.width;
             var realHeight = image.height;
             $(".txt_width").val(realWidth);
             $(".txt_height").val(realHeight);
             $(".txt_ZoomWidth").val(realWidth);
             $(".txt_ZoomHeight").val(realHeight);
         }

         //放大缩小图片
         function imgToSize(size) {
             var img = $(".imgCut");
             var oWidth = img.width(); //取得图片的实际宽度
             var oHeight = img.height(); //取得图片的实际高度
             img.width(oWidth + size);
             img.height(oHeight + size / oWidth * oHeight);
             $(".txt_ZoomWidth").val(oWidth + size);
             $(".txt_ZoomHeight").val(oHeight + size / oWidth * oHeight);
             var zoom = parseInt($(".txt_Zoom").val());
             zoom += size;
             //图片当前尺寸和位置             
             $(".txt_Zoom").val(zoom);
             return true;
         }
    </script>
    <style type="text/css">
        .gai_upload {
            bottom: auto;
    height: 32px;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: auto;
    top: 0;
    width: 106px;
        }
        .btn_upload {
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
   
    overflow: visible;
    
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    background-color: #fff;
    background-image: linear-gradient(to bottom, #fff 0px, #fff 100%);
    border-color: #e7e7eb;
    color: #222;
    height: 30px;
    line-height: 30px;
    padding-left: 22px;
    padding-right: 22px;
    width: auto;
    min-width:60px;
}
        .upload_area {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}
        .zoom-out{padding-left:28px;background:url(../image/zoom-out.png) 0 center no-repeat;float:left;cursor:pointer;}
        .zoom-in{padding-left:28px;background:url(../image/zoom-in.png) 0 center no-repeat;float:right;cursor:pointer;}
        .zoom{margin:0px 0 30px;}
        .imgCut1{width:284px;height:266px;}
        .imgCut11{width:284px;height:266px;position:relative;overflow:hidden; 
                  border:1px solid #ccc;
                  margin:0px auto}
        .imgCut111{position:absolute;top:0px;left:0px;border:0px;cursor:pointer}
        .imgCut112{position:absolute;top:0px;left:0px;filter:alpha(opacity=70);-moz-opacity:0.7;}
        .imgCut112 td{ width:72px; height:33px;background-color:#ccc;FILTER:alpha(opacity=70);opacity:0.7; }
        .imgCut112 td.main{width:220px; height:220px;background-color:#fff;FILTER:alpha(opacity=1);opacity:0.01;}

        .imgCut112_Preview{position:absolute;top:0px;left:0px;cursor:pointer}
        .imgCut112_Preview td{width:72px; height:33px;background-color:White; }
        .imgCut112_Preview td.main_Preview{width:220px; height:220px;border:1px solid #000000;background-color: transparent}

        .imgCut12{width:249px;margin:0px auto;}
        .imgCut121{float:left;border:0px;background:url(Minc.gif) no-repeat;width:19px;height:19px}
        .imgCut122{float:left; background:url(track.gif) no-repeat center; height:20px;width:211px; position:relative}
        .imgCut1221{position:absolute;top:3px;left:100px;background:url(grip.gif) no-repeat;width:11px;height:16px}
        .imgCut123{float:left;border:0px;background:url(Maxc.gif) no-repeat;width:19px;height:19px}

        .imgCutNew1{width:140px;height:200px;}
        .imgCutNew11{width:140px;height:200px;position:relative;overflow:hidden;border:2px solid #888888;margin:0px auto}
        .imgCutNew111{position:absolute;top:0px;left:0px;border:0px;}
        .imgLogin{width:70px;height:70px;position:relative;overflow:hidden; border:1px solid #f22fff;margin:0px auto; border-radius:35px;}
        .imgLoginBack{width:140px;height:140px;position:relative;overflow:hidden; border:2px solid #888888;margin:0px auto;border-radius:70px; }

        .circle_show{position:relative;width:220px;height:220px;overflow:hidden;margin:0px auto;border-radius:50%;border: 1px solid #ccc;}

    </style>

            </div>
        </div>     
    </form>
    
</body>
</html>